import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { ArrowLeft, Star, ArrowRight, ShoppingCart, Download } from 'lucide-react';
export function LoadoutDetail() {
  const {
    loadoutId
  } = useParams();
  // This would normally be fetched from an API based on the loadoutId
  // For now, we'll use a static object that matches the loadoutId
  const loadoutData = getLoadoutById(loadoutId);
  if (!loadoutData) {
    return <div className="w-full bg-earth-dark min-h-screen py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="font-display text-3xl mb-4">Loadout Not Found</h1>
          <p className="mb-8">
            The loadout you're looking for doesn't exist or has been moved.
          </p>
          <Link to="/loadouts" className="inline-flex items-center bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
            <ArrowLeft size={16} className="mr-2" />
            Back to Loadouts
          </Link>
        </div>
      </div>;
  }
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img src={loadoutData.heroImage} alt={loadoutData.title} className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-carbon-black via-carbon-black/70 to-transparent"></div>
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl">
            <Link to="/loadouts" className="inline-flex items-center text-sand-light hover:text-outdoor-orange mb-4 transition-colors">
              <ArrowLeft size={16} className="mr-2" />
              Back to Loadouts
            </Link>
            <h1 className="font-display text-4xl md:text-6xl text-white mb-4">
              {loadoutData.title}
            </h1>
            <div className="flex flex-wrap items-center gap-4 mb-6">
              <span className="bg-outdoor-orange px-3 py-1 rounded-full text-sm font-bold">
                {loadoutData.activity.toUpperCase()}
              </span>
              <span className="bg-carbon-black px-3 py-1 rounded-full text-sm">
                {loadoutData.duration === 'day' ? 'DAY TRIP' : loadoutData.duration === 'weekend' ? 'WEEKEND' : 'MULTI-DAY'}
              </span>
              <span className="bg-carbon-black px-3 py-1 rounded-full text-sm">
                TOTAL WEIGHT: {loadoutData.totalWeight}
              </span>
              <span className="bg-carbon-black px-3 py-1 rounded-full text-sm">
                {loadoutData.itemCount} ITEMS
              </span>
            </div>
            <p className="text-xl text-sand-light max-w-3xl">
              {loadoutData.description}
            </p>
          </div>
        </div>
      </section>
      {/* Loadout Overview */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <h2 className="font-display text-3xl md:text-4xl mb-8">
                LOADOUT OVERVIEW
              </h2>
              <p className="text-gray-300 mb-8">{loadoutData.overview}</p>
              {/* Gear Categories */}
              {loadoutData.categories.map((category, index) => <div key={index} className="mb-12">
                  <h3 className="font-display text-2xl mb-6 border-b border-gray-700 pb-2">
                    {category.name.toUpperCase()}
                  </h3>
                  <div className="space-y-6">
                    {category.items.map((item, itemIndex) => <div key={itemIndex} className="bg-carbon-black rounded-lg p-6">
                        <div className="md:flex">
                          <div className="md:w-1/4 mb-4 md:mb-0">
                            <img src={item.image} alt={item.name} className="w-full h-48 object-cover rounded-md" />
                          </div>
                          <div className="md:w-3/4 md:pl-6">
                            <div className="flex justify-between items-start mb-2">
                              <h4 className="font-display text-xl">
                                {item.name}
                              </h4>
                              <div className="flex items-center">
                                {[...Array(5)].map((_, i) => <Star key={i} size={16} className={i < item.rating ? 'text-outdoor-orange fill-outdoor-orange' : 'text-gray-500'} />)}
                              </div>
                            </div>
                            <div className="flex flex-wrap gap-2 mb-4">
                              <span className="text-sm bg-earth-dark px-2 py-1 rounded">
                                Weight: {item.weight}
                              </span>
                              <span className="text-sm bg-earth-dark px-2 py-1 rounded">
                                Price: {item.price}
                              </span>
                            </div>
                            <p className="text-gray-300 mb-4">
                              {item.description}
                            </p>
                            <div className="flex flex-wrap gap-3">
                              <a href="#" className="inline-flex items-center bg-outdoor-orange hover:bg-climbing-red text-white px-4 py-2 rounded transition-colors text-sm">
                                <ShoppingCart size={14} className="mr-1" />
                                Check Price
                              </a>
                              <Link to={`/review/${item.id}`} className="inline-flex items-center border border-gray-600 hover:border-outdoor-orange text-sand-light hover:text-outdoor-orange px-4 py-2 rounded transition-colors text-sm">
                                Read Full Review
                              </Link>
                            </div>
                          </div>
                        </div>
                      </div>)}
                  </div>
                </div>)}
            </div>
            {/* Sidebar */}
            <div>
              <div className="bg-carbon-black rounded-lg p-6 sticky top-24">
                <h3 className="font-display text-2xl mb-6">LOADOUT STATS</h3>
                <div className="space-y-4 mb-8">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Total Weight:</span>
                    <span className="font-bold">{loadoutData.totalWeight}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Total Items:</span>
                    <span className="font-bold">{loadoutData.itemCount}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Estimated Cost:</span>
                    <span className="font-bold">
                      ${loadoutData.estimatedCost}
                    </span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-300">Best For:</span>
                    <span className="font-bold">{loadoutData.bestFor}</span>
                  </div>
                </div>
                <div className="space-y-4">
                  <button className="w-full bg-outdoor-orange hover:bg-climbing-red text-white font-display py-3 rounded transition-colors flex items-center justify-center">
                    <Download size={16} className="mr-2" />
                    DOWNLOAD PACKING LIST
                  </button>
                  <button className="w-full border border-gray-600 hover:border-outdoor-orange text-sand-light hover:text-outdoor-orange font-display py-3 rounded transition-colors">
                    SHARE LOADOUT
                  </button>
                </div>
                <div className="mt-8">
                  <h4 className="font-display text-xl mb-4">
                    RELATED LOADOUTS
                  </h4>
                  <div className="space-y-4">
                    {loadoutData.relatedLoadouts.map((related, index) => <Link key={index} to={`/loadouts/${related.id}`} className="block bg-earth-dark p-4 rounded-lg hover:bg-earth-dark/70 transition-colors">
                        <h5 className="font-bold mb-1">{related.title}</h5>
                        <div className="flex justify-between items-center text-sm">
                          <span className="text-gray-400">
                            {related.activity}
                          </span>
                          <span className="text-outdoor-orange flex items-center">
                            View
                            <ArrowRight size={14} className="ml-1" />
                          </span>
                        </div>
                      </Link>)}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>;
}
// Helper function to get loadout data by ID
function getLoadoutById(loadoutId) {
  const loadouts = {
    '24-hour-trek': {
      title: '24-HOUR LIGHTWEIGHT TREK LOADOUT',
      description: 'Everything you need for a fast and light 24-hour adventure in the mountains. This carefully curated gear selection balances weight, functionality, and durability.',
      heroImage: 'https://images.unsplash.com/photo-1627163439134-7a8c47e08208?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
      activity: 'hiking',
      duration: 'day',
      totalWeight: '5.4kg',
      itemCount: 14,
      estimatedCost: 1250,
      bestFor: 'Alpine Day Hikes',
      overview: 'This 24-hour lightweight trek loadout is designed for adventurers who want to move fast and light in the mountains without sacrificing comfort or safety. Every item has been carefully selected to minimize weight while maintaining functionality in a variety of conditions. Perfect for ambitious day hikes, overnight fastpacking trips, or as an emergency kit for longer adventures.',
      categories: [{
        name: 'Packs & Storage',
        items: [{
          id: 'osprey-talon-22',
          name: 'Osprey Talon 22 Backpack',
          image: 'https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 5,
          weight: '920g',
          price: '$140',
          description: 'The perfect size for day hikes with excellent organization and a comfortable carrying system. The AirScape back panel provides good ventilation while the integrated rain cover ensures your gear stays dry in unexpected weather.'
        }, {
          id: 'sea-to-summit-dry-bag',
          name: 'Sea to Summit Lightweight Dry Bag',
          image: 'https://images.unsplash.com/photo-1618377384715-9aa42a27e2df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 4,
          weight: '54g',
          price: '$18',
          description: 'A 4-liter ultralight dry bag for keeping electronics, spare clothes, and other moisture-sensitive items protected. The 70D nylon construction offers an excellent balance of weight and durability.'
        }]
      }, {
        name: 'Footwear',
        items: [{
          id: 'salomon-x-ultra-4',
          name: 'Salomon X Ultra 4 GTX',
          image: 'https://images.unsplash.com/photo-1542124292-60272943bc2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 4,
          weight: '350g per shoe',
          price: '$160',
          description: 'Lightweight, waterproof hiking shoes with excellent traction on varied terrain. The Contagrip outsole provides confidence on wet rocks and muddy trails, while the QuickLace system allows for fast and precise adjustment.'
        }]
      }, {
        name: 'Navigation & Safety',
        items: [{
          id: 'black-diamond-spot-350',
          name: 'Black Diamond Spot 350 Headlamp',
          image: 'https://images.unsplash.com/photo-1505773278895-5efa7b11679a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 5,
          weight: '86g',
          price: '$40',
          description: 'A reliable, weatherproof headlamp with multiple lighting modes and 350 lumens of brightness. The PowerTap technology allows for quick transitions between full and dimmed power.'
        }, {
          id: 'garmin-inreach-mini',
          name: 'Garmin inReach Mini',
          image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 5,
          weight: '100g',
          price: '$350',
          description: 'A compact satellite communicator that provides two-way messaging, location sharing, and SOS capabilities anywhere in the world. Pairs with your smartphone for easy use of topographic maps and more.'
        }]
      }, {
        name: 'Clothing',
        items: [{
          id: 'patagonia-nano-puff',
          name: 'Patagonia Nano Puff Jacket',
          image: 'https://images.unsplash.com/photo-1478826160983-e6db8c7d537a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 4,
          weight: '286g',
          price: '$229',
          description: 'A versatile synthetic insulation layer that provides excellent warmth even when wet. The PrimaLoft Gold Insulation Eco is made from 55% recycled content, and the entire jacket stuffs into its own internal chest pocket.'
        }]
      }],
      relatedLoadouts: [{
        id: 'ultralight-thru-hike',
        title: 'ULTRALIGHT THRU-HIKING SETUP',
        activity: 'Multi-day Hiking'
      }, {
        id: 'alpine-photography',
        title: 'ALPINE PHOTOGRAPHY KIT',
        activity: 'Day Hiking'
      }, {
        id: 'winter-alpine-climb',
        title: 'WINTER ALPINE CLIMBING KIT',
        activity: 'Climbing'
      }]
    },
    'winter-alpine-climb': {
      title: 'WINTER ALPINE CLIMBING KIT',
      description: 'Technical climbing gear for serious winter mountaineering expeditions. Designed for safety, efficiency, and reliability in extreme conditions.',
      heroImage: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
      activity: 'climbing',
      duration: 'multi-day',
      totalWeight: '9.2kg',
      itemCount: 22,
      estimatedCost: 2800,
      bestFor: 'Winter Mountaineering',
      overview: 'This comprehensive winter alpine climbing kit contains everything needed for serious mountaineering expeditions in challenging conditions. From technical climbing gear to survival essentials, each component has been selected for its reliability, durability, and performance in extreme alpine environments. Suitable for experienced climbers tackling technical routes in winter conditions.',
      categories: [{
        name: 'Technical Climbing Gear',
        items: [{
          id: 'petzl-lynx-crampons',
          name: 'Petzl Lynx Crampons',
          image: 'https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 5,
          weight: '1080g/pair',
          price: '$225',
          description: 'Modular crampons adaptable for all types of ice climbing and dry tooling. The interchangeable front points can be configured as mono or dual-point depending on the terrain.'
        }, {
          id: 'black-diamond-venom-axe',
          name: 'Black Diamond Venom Ice Axe',
          image: 'https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
          rating: 5,
          weight: '495g',
          price: '$190',
          description: 'A versatile ice axe with an ergonomic handle for technical ice climbing and a classic pick for self-arrest. The modular design allows for customization based on the climbing objectives.'
        }]
      }],
      relatedLoadouts: [{
        id: '24-hour-trek',
        title: '24-HOUR LIGHTWEIGHT TREK LOADOUT',
        activity: 'Day Hiking'
      }, {
        id: 'rock-climbing-day',
        title: 'SINGLE-PITCH ROCK CLIMBING KIT',
        activity: 'Rock Climbing'
      }, {
        id: 'backcountry-ski',
        title: 'BACKCOUNTRY SKI TOURING SETUP',
        activity: 'Winter Sports'
      }]
    }
    // Additional loadouts would be defined here
  };
  return loadouts[loadoutId];
}